<template>
  <div class="photoInfo-box">
    <h3>{{getimageInfos.title}}</h3>
    <div class="photoTime">
        <span>发表时间:{{getimageInfos.add_time | timef}}</span>
        <span>点击：{{getimageInfos.click}}次</span>
    </div>
    <hr>
    <!-- <img v-for="items in getthumimgs" :key='items.src' :src="items.src"  alt=""> -->
        <!-- 图片缩略图插件 -->
    <div class="photosuo">
         <vue-preview :slides="getthumimgs" @close="handleClose" ></vue-preview>
    </div>
       
    <div class="photoImg" >
        <div class="piContent">{{getimageInfos.content}}</div>
    </div>
    <!-- 发表评论 -->
    <comment :id="id"></comment>
  </div>
</template>
<script>
// import comment from '../subcomponents/comment'
import comment from '../subcomponents/comment.vue'
export default {
  data() {
    return {
      id:this.$route.params.id,
      getimageInfos:[],
      getthumimgs:[]
    };
  },
  created() {
      this.getimageInfo(),
      this.getthumimages()
  },
  methods: {
    //   获取数据
      getimageInfo(){
          this.$http.get('api/getimageInfo/'+this.id).then(res=>{
            //   console.log(res.body)
              if(res.body.status===0){
                  this.getimageInfos=res.body.message[0];
              }
          });
      },
    //   获取图片数据
      getthumimages(){
          this.$http.get('api/getthumimages/'+this.id).then(res=>{
            //   console.log(res)
              if(res.body.status===0){
                  res.body.message.forEach(item=>{
                      item.msrc=item.src;
                      item.w=600;
                      item.h=400;
                  })
                  this.getthumimgs=res.body.message;
              }
          })
      },
      handleClose(){

      },
      
  },
  components:{
    comment
  }
}
</script>
<style lang="scss">
    .photoInfo-box{
        padding: 0 4px;
        h3{
            text-align: center;
            color: rgb(0, 255, 106);
            padding: 5px 0;
        }
        .photoTime{
            display:flex;
            justify-content: space-between;
        }
        .my-gallery{
            display: flex;
            flex-wrap: wrap;
            figure{
             margin: 0;
            padding: 3px;
            width: 33.3333%;
            img{
            width: 100%;
            }
        
            
        }
        }
        
    }
</style>